<template>
    <div class="search-box">
        <div class="search-input-line">
            <div class="icon" style="--w: 1vw; --h: 1vw; --icon: url(/icon/search1.svg)"></div>
            <input type="text" placeholder="Search stocks, ETFs, indices...">
        </div>
    </div>
</template>

<script setup></script>

<style scoped lang="less">
.search-box {
    box-sizing: border-box;
    padding: 1vw;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
    border-radius: 0.5vw;

    .search-input-line {
        box-sizing: border-box;
        width: 100%;
        height: 2vw;
        padding: 0.5vw;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5vw;
        background-color: var(--bg-strong-color);

        input {
            width: 100%;
            background-color: #ffffff00;
            border: 0;
            outline: 0;
            font-size: 0.8vw;
        }
    }
}
</style>